<template>
  <div class="mod-home">
    <div class="mod-home-top">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>总览数据</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="mod-home-list" style="background:#409EFF;">
              <div class="mod-home-list-l" style="color:#fff;">
                <icon-svg name="zaizhi" style="font-size:4em;"></icon-svg>
              </div>
              <div class="mod-home-list-r" style="color:#fff;">
                <h3>在职船员<br /><br />{{homeCountLis.crewCount}}人</h3>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="mod-home-list" style="background:#409EFF;">
              <div class="mod-home-list-l" style="color:#fff;">
                <icon-svg name="zaizhi" style="font-size:4em;"></icon-svg>
              </div>
              <div class="mod-home-list-r" style="color:#fff;">
                <h3>上船人数<br /><br />{{homeCountLis.onBoardCount}}人</h3>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="mod-home-list" style="background:#409EFF;">
              <div class="mod-home-list-l" style="color:#fff;">
                <icon-svg name="zaizhi" style="font-size:4em;"></icon-svg>
              </div>
              <div class="mod-home-list-r" style="color:#fff;">
                <h3>派遣总数<br /><br />{{homeCountLis.dispatchCount}}人</h3>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="mod-home-list" style="background:#409EFF;">
              <div class="mod-home-list-l" style="color:#fff;">
                <icon-svg name="zaizhi" style="font-size:4em;"></icon-svg>
              </div>
              <div class="mod-home-list-r" style="color:#fff;">
                <h3>年度派遣总数<br /><br />{{homeCountLis.dispatchYearCount}}人</h3>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div class="mod-home-top" style="margin-top:20px;">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>近30天数据预警</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="mod-home-list" style="background: rgb(253, 226, 226)"  @click="contractCount()">
              <div class="mod-home-list-l" style="color:#F56C6C;">
                <icon-svg name="zaizhi" style="font-size:4em;"></icon-svg>
              </div>
              <div class="mod-home-list-r" style="color:#F56C6C;">
                <h3>预计到期合同<br /><br />{{homeCountLis.contractCount}}人</h3>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="mod-home-list" style="background: rgb(253, 226, 226)"  @click="certificateCount()">
              <div class="mod-home-list-l" style="color:#F56C6C;">
                <icon-svg name="zaizhi" style="font-size:4em;"></icon-svg>
              </div>
              <div class="mod-home-list-r" style="color:#F56C6C;">
                <h3>预计到期证书<br /><br />{{homeCountLis.certificateCount}}人</h3>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="mod-home-list" style="background: rgb(253, 226, 226)" @click="estimateDisembarkationCount()">
              <div class="mod-home-list-l" style="color:#F56C6C;">
                <icon-svg name="zaizhi" style="font-size:4em;"></icon-svg>
              </div>
              <div class="mod-home-list-r" style="color:#F56C6C;">
                <h3>预计下船<br /><br />{{homeCountLis.estimateDisembarkationCount}}人</h3>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="mod-home-list" style="background: rgb(253, 226, 226)" @click="waitBoardCount()">
              <div class="mod-home-list-l" style="color:#F56C6C;">
                <icon-svg name="zaizhi" style="font-size:4em;"></icon-svg>
              </div>
              <div class="mod-home-list-r" style="color:#F56C6C;">
                <h3>已过期信息<br /><br />{{homeCountLis.waitBoardCount}}人</h3>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div class="chart">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>年度派遣数量走势</span>
        </div>
        <div id="myChart" :style="{width: '100%', height: '300px'}"></div>
      </el-card>
    </div>
    <div class="chart">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>船员现职务占比</span>
            </div>
            <div id="myChart1" :style="{width: '100%', height: '300px'}"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>船员状态分布占比</span>
            </div>
            <div id="myChart2" :style="{width: '100%', height: '300px'}"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-dialog title="预计到期合同" :visible.sync="contractCountBox" width="600px">
      <el-table :data="contractCountBoxData" style="width: 100%" height="500">
        <el-table-column  prop="contractName" label="合同名称" ></el-table-column>
        <el-table-column  prop="stakeholder" label="干系人"></el-table-column>
        <el-table-column  prop="endTime" label="截至时间"></el-table-column>
        <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="contractCountBoxClick(scope.row.contractId)" >详细</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="预计到期证书" :visible.sync="certificateCountBox" width="800px">
      <el-table :data="certificateCountBoxData" style="width: 100%" height="500">
        <el-table-column  prop="crewName" label="船员姓名"></el-table-column>
        <el-table-column  prop="certificateName" label="证书名称" ></el-table-column>
        <el-table-column  prop="expirationDate" label="到期日期">
          <template slot-scope="scope">
            {{scope.row.expirationDate.slice(0,10)}}
          </template>
        </el-table-column>
        <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="certificateCountBoxClick(scope.row.certificateId)" >详细</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="预计下船" :visible.sync="estimateDisembarkationCountBox" width="800px">
      <el-table :data="estimateDisembarkationCountBoxData" style="width: 100%" height="500">
        <el-table-column  prop="dispatchCrew" label="派遣船员"></el-table-column>
        <el-table-column  prop="estimateDisembarkationTime" label="预约下船时间" ></el-table-column>
        <el-table-column  prop="vesselName" label="船舶名称"></el-table-column>
        <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="estimateDisembarkationCountBoxClick(scope.row.dispatchId)" >详细</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="已过期信息" :visible.sync="waitBoardCountBox" width="800px">
      <el-table :data="waitBoardCountBoxData" style="width: 100%" height="500">
        <el-table-column  prop="cName" label="船员姓名" ></el-table-column>
        <el-table-column  prop="eName" label="合同/证书名称"></el-table-column>
        <el-table-column label="到期时间">
          <template slot-scope="scope">
            {{scope.row.time.slice(0,10)}}
          </template>
        </el-table-column>
        <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="waitBoardCountBoxDataClick(scope.row.id, scope.row.flag)" >详细</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      homeCountLis: {},
      lastYearCount: [],
      currentYearCount: [],
      contractCountBox: false,
      contractCountBoxData: [],
      certificateCountBox: false,
      certificateCountBoxData: [],
      estimateDisembarkationCountBox: false,
      estimateDisembarkationCountBoxData: [],
      waitBoardCountBox: false,
      waitBoardCountBoxData: []
    }
  },
  mounted(){
    this.drawpie();
    this.drawpiet();
    this.selectHomeCountLis()
  },
  methods: {
    waitBoardCount(){
      this.waitBoardCountBox = true
      this.$http({
        url: this.$http.adornUrl('/generator/selectHomeCount/informationExpired'),
        method: 'get'
      }).then(({data}) => {
        if (data && data.code === 0) {
          console.log(data)
          this.waitBoardCountBoxData = data.informationExpired
        } else {
          this.waitBoardCountBoxData = []
        }
      })
    },
    waitBoardCountBoxDataClick(id, flag) {
      if (flag === 0) {
        this.$router.push({
          path:'/generator-contractinfo?contractid=' + id
        })
      } else if (flag === 1) {
        this.$router.push({
          path:'/generator-certificatemanagement?certificateid=' + id
        })
      }
      
    },
    estimateDisembarkationCount() {
      this.estimateDisembarkationCountBox = true
      this.$http({
        url: this.$http.adornUrl('/generator/selectHomeCount/disembarkationExpected'),
        method: 'get'
      }).then(({data}) => {
        if (data && data.code === 0) {
          console.log(data)
          this.estimateDisembarkationCountBoxData = data.disembarkationExpected
        } else {
          this.estimateDisembarkationCountBoxData = []
        }
      })
    },
    estimateDisembarkationCountBoxClick(id) {
      this.$router.push({
        path:'/generator-dispatchinfo?dispatchid=' + id
      })
    },
    certificateCount() {
      this.certificateCountBox = true
      this.$http({
        url: this.$http.adornUrl('/generator/selectHomeCount/certificateExpected'),
        method: 'get'
      }).then(({data}) => {
        if (data && data.code === 0) {
          console.log(data)
          this.certificateCountBoxData = data.certificateExpected
        } else {
          this.certificateCountBoxData = []
        }
      })
    },
    certificateCountBoxClick(id) {
      this.$router.push({
        path:'/generator-certificatemanagement?certificateid=' + id
      })
    },
    contractCount() {
      this.contractCountBox = true
      this.$http({
        url: this.$http.adornUrl('/generator/selectHomeCount/contractExpected'),
        method: 'get'
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.contractCountBoxData = data.contractExpected
        } else {
          this.contractCountBoxData = []
        }
      })
    },
    contractCountBoxClick(id) {
      this.$router.push({
        path:'/generator-contractinfo?contractid=' + id
      })
    },
    selectHomeCountLis() {
      var _this = this
      this.$http({
        url: this.$http.adornUrl('/generator/selectHomeCount/selectHomeCountList'),
        method: 'get'
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.homeCountLis = data.selectHomeCountList[0]
        } else {
          this.homeCountLis = []
        }
      })
      // 上一年度
      this.$http({
        url: this.$http.adornUrl('/generator/selectHomeCount/lastYearCount'),
        method: 'get'
      }).then(({data}) => {
        if (data && data.code === 0) {
          if (data.lastYearCount[0]) {
            var lastYearCountBox = []
            lastYearCountBox.push(data.lastYearCount[0].one, data.lastYearCount[0].two, data.lastYearCount[0].three, data.lastYearCount[0].four, data.lastYearCount[0].five, data.lastYearCount[0].six, data.lastYearCount[0].seven, data.lastYearCount[0].eight, data.lastYearCount[0].nine, data.lastYearCount[0].ten, data.lastYearCount[0].eleven, data.lastYearCount[0].twelve)
            _this.lastYearCount = lastYearCountBox
          } else {
            _this.lastYearCount = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          }
        } else {
          this.homeCountLis = []
        }
      })
      this.$http({
        url: this.$http.adornUrl('/generator/selectHomeCount/currentYearCount'),
        method: 'get'
      }).then(({data}) => {
        if (data && data.code === 0) {
          if (data.currentYearCount[0]) {
            var currentYearCountBox = []
            currentYearCountBox.push(data.currentYearCount[0].one, data.currentYearCount[0].two, data.currentYearCount[0].three, data.currentYearCount[0].four, data.currentYearCount[0].five, data.currentYearCount[0].six, data.currentYearCount[0].seven, data.currentYearCount[0].eight, data.currentYearCount[0].nine, data.currentYearCount[0].ten, data.currentYearCount[0].eleven, data.currentYearCount[0].twelve)
            _this.currentYearCount = currentYearCountBox
          } else {
            _this.currentYearCount = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          }
        } else {
          this.homeCountLis = []
        }
      })
      setTimeout( function(){
        _this.drawLine();
      }, 500 )
    },
    drawLine(){
      var _this = this
      var date=new Date;
      var y = date.getFullYear()
      var oldy = date.getFullYear()-1
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: [String(oldy) ,String(y)]
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: date.getFullYear()-1,
                    type: 'line',
                    stack: '总量',
                    data: _this.lastYearCount
                },
                {
                    name: date.getFullYear(),
                    type: 'line',
                    stack: '总量',
                    data: _this.currentYearCount
                }
            ]
        });
    },
    drawpie() {
      this.$http({
        url: this.$http.adornUrl('/generator/selectHomeCount/selectPostPercent'),
        method: 'get'
      }).then(({data}) => {
        if (data && data.code === 0) {
          console.log(data.selectPostPercent)
          var crewPost = []
          var dataBox = []
          data.selectPostPercent.forEach(function(value, index, array) {
            crewPost.push(value.crewPost)
            dataBox.push({value: value.cnt, name: value.crewPost})
          })
          console.log(dataBox)
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById('myChart1'))
          // 绘制图表
          myChart.setOption({
            title: {
                text: '',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: crewPost
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: dataBox,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
          })
        }
      })
    },
    drawpiet() {
      this.$http({
        url: this.$http.adornUrl('/generator/selectHomeCount/selectStatusPercent'),
        method: 'get'
      }).then(({data}) => {
        if (data && data.code === 0) {
          console.log(data.selectStatusPercent)
          var crewPost = []
          var dataBox = []
          data.selectStatusPercent.forEach(function(value, index, array) {
            crewPost.push(value.crewStatus)
            dataBox.push({value: value.cnt, name: value.crewStatus})
          })
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById('myChart2'))
          // 绘制图表
          myChart.setOption({
            title: {
                text: '',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: crewPost
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: dataBox,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
          })
        }
      })
    }
  }
}
</script>

<style>
  .mod-home-list{
    background: #e5e9f2;
    border-radius: 5px;
    padding: 10px;
    height: 100px;
    margin-bottom: 20px;
  }
  .mod-home-list-l{
    float: left;
    width: 40%;
    margin: 15px 0 0 0;
  }
  .mod-home-list-r{
    float: left;
    width: 60%;
  }
  .chart{
    padding-top: 30px;
  }
</style>

